
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
  
  <!-- Basic -->
  <title>Margo | Home</title>
  
  <!-- Define Charset -->
  <meta charset="utf-8">
  
  <!-- Responsive Metatag -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <!-- Page Description and Author -->
  <meta name="description" content="Margo - Responsive HTML5 Template">
  <meta name="author" content="iThemesLab">

  <!-- Bootstrap CSS  -->
  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
  
  <!-- Revolution Banner CSS -->
  <link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" />
  
  <!-- Margo CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  
  <!-- Responsive CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
  
  <!-- Css3 Transitions Styles  -->
  <link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
  
  <!-- Color CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
  
  
  
  <!-- Margo JS  -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.migrate.js"></script>
  <script type="text/javascript" src="js/modernizrr.js"></script>
  <script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/jquery.fitvids.js"></script>
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
  <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
  <script type="text/javascript" src="js/jquery.appear.js"></script>
  <script type="text/javascript" src="js/count-to.js"></script>
  <script type="text/javascript" src="js/jquery.textillate.js"></script>
  <script type="text/javascript" src="js/jquery.lettering.js"></script>
  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
  <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
  <script type="text/javascript" src="js/jquery.parallax.js"></script>
  <script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
  <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
</head>
<body>

	<!-- Container -->
	<div id="container">
		
        <!-- Start Header -->
        <div class="hidden-header"></div>
        <header class="clearfix">
          
          <!-- Start Top Bar -->
          <div class="top-bar">
            <div class="container">
               <div class="row">
                  <div class="col-md-6">
                    <!-- Start Contact Info -->
                    <ul class="contact-details">
                                <li><a href="#"><i class="fa fa-map-marker"></i> House-54/A, London, UK</a>
                                </li>
                                <li><a href="#"><i class="fa fa-envelope-o"></i> info@yourcompany.com</a>
                                </li>
                                <li><a href="#"><i class="fa fa-phone"></i> +12 345 678 000</a>
                                </li>
                            </ul>
                  <!-- End Contact Info -->
              </div>
              <div class="col-md-6">
                <!-- Start Social Links -->
                <ul class="social-list">
                  <li>
                    <a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
                </li>
                <li>
                    <a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                </li>
                <li>
                    <a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
                </li>
                <li>
                    <a class="dribbble itl-tooltip" data-placement="bottom" title="Dribble" href="#"><i class="fa fa-dribbble"></i></a>
                </li>
                <li>
                    <a class="linkdin itl-tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                </li>
                <li>
                    <a class="flickr itl-tooltip" data-placement="bottom" title="Flickr" href="#"><i class="fa fa-flickr"></i></a>
                </li>
                <li>
                    <a class="tumblr itl-tooltip" data-placement="bottom" title="Tumblr" href="#"><i class="fa fa-tumblr"></i></a>
                </li>
                <li>
                    <a class="instgram itl-tooltip" data-placement="bottom" title="Instagram" href="#"><i class="fa fa-instagram"></i></a>
                </li>
                <li>
                    <a class="vimeo itl-tooltip" data-placement="bottom" title="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
                </li>
                <li>
                    <a class="skype itl-tooltip" data-placement="bottom" title="Skype" href="#"><i class="fa fa-skype"></i></a>
                </li>
            </ul>
            <!-- End Social Links -->
        </div>
    </div>
</div>
</div>
<!-- End Top Bar -->

<!-- Start Header ( Logo & Naviagtion ) -->
<div class="navbar navbar-default navbar-top">
  <div class="container">
     <div class="navbar-header">
        <!-- Stat Toggle Nav Link For Mobiles -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <i class="fa fa-bars"></i>
       </button>
       <!-- End Toggle Nav Link For Mobiles -->
       <a class="navbar-brand" href="index.html"><img alt="" src="images/margo.png"></a>
   </div>
   <div class="navbar-collapse collapse">
      <!-- Stat Search -->
      <div class="search-side">
        <a href="#" class="show-search"><i class="fa fa-search"></i></a>
        <div class="search-form">
          <form autocomplete="off" role="search" method="get" class="searchform" action="#">
            <input type="text" value="" name="s" id="s" placeholder="Search the site...">
        </form>
    </div>
</div>
<!-- End Search -->
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
 <li>
    <a class="active" href="index.html">Home</a>
    <ul class="dropdown">
       <li><a href="index.html">Home Main Version</a></li>
       <li><a href="index-01.html">Home Version 1</a></li>
       <li><a href="index-02.html">Home Version 2</a></li>
       <li><a class="active" href="index-03.html">Home Version 3</a></li>
       <li><a href="index-04.html">Home Version 4</a></li>
       <li><a href="index-05.html">Home Version 5</a></li>
       <li><a href="index-06.html">Home Version 6</a></li>
       <li><a href="index-07.html">Home Version 7</a></li>
   </ul>
</li>
<li>
  <a href="about.html">Pages</a>
  <ul class="dropdown">
     <li><a href="about.html">About</a></li>
     <li><a href="services.html">Services</a></li>
     <li><a href="right-sidebar.html">Right Sidebar</a></li>
     <li><a href="left-sidebar.html">Left Sidebar</a></li>
     <li><a href="404.html">404 Page</a></li>
 </ul>
</li>
<li>
    <a href="#">Shortcodes</a>
    <ul class="dropdown">
      <li><a href="tabs.html">Tabs</a></li>
      <li><a href="buttons.html">Buttons</a></li>
      <li><a href="action-box.html">Action Box</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="latest-posts.html">Latest Posts</a></li>
      <li><a href="latest-projects.html">Latest Projects</a></li>
      <li><a href="pricing.html">Pricing Tables</a></li>
      <li><a href="animated-graphs.html">Animated Graphs</a></li>
      <li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
  </ul>
</li>
<li>
    <a href="portfolio-3.html">Portfolio</a>
    <ul class="dropdown">
       <li><a href="portfolio-2.html">2 Columns</a></li>
       <li><a href="portfolio-3.html">3 Columns</a></li>
       <li><a href="portfolio-4.html">4 Columns</a></li>
       <li><a href="single-project.html">Single Project</a></li>
   </ul>
</li>
<li>
  <a href="blog.html">Blog</a>
  <ul class="dropdown">
     <li><a href="blog.html">Blog - right Sidebar</a></li>
     <li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a></li>
     <li><a href="single-post.html">Blog Single Post</a></li>
 </ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- End Navigation List -->
</div>
</div>
</div>
<!-- End Header ( Logo & Naviagtion ) -->

</header>
<!-- End Header -->




<!-- Start HomePage Slider -->

<section id="home">	
  <!-- Carousel -->
  <div id="main-slide" class="carousel slide" data-ride="carousel">

     <!-- Indicators -->
     <ol class="carousel-indicators">
      <li data-target="#main-slide" data-slide-to="0" class="active"></li>
      <li data-target="#main-slide" data-slide-to="1"></li>
      <li data-target="#main-slide" data-slide-to="2"></li>
  </ol><!--/ Indicators end-->

  <!-- Carousel inner -->
  <div class="carousel-inner">
     <div class="item active">
        <img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
        <div class="slider-content">
            <div class="col-md-12 text-center">
              <h2 class="animated2">
                  <span>Welcome to <strong>Margo</strong></span>
              </h2>
              <h3 class="animated3">
               <span>The ultimate aim of your business</span>
           </h3>
           <p class="animated4"><a href="#" class="slider btn btn-primary">Check Now</a></p>
       </div>
   </div>
</div><!--/ Carousel item end -->
<div class="item">
    <img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
    <div class="slider-content">
        <div class="col-md-12 text-center">
            <h2 class="animated4">
                <span><strong>Margo</strong> for the highest</span>
            </h2>
            <h3 class="animated5">
               <span>The Key of your Success</span>
           </h3>		
           <p class="animated6"><a href="#" class="slider btn btn-primary">Buy Now</a></p>	     
       </div>
   </div>
</div><!--/ Carousel item end -->
<div class="item">
    <img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
    <div class="slider-content">
        <div class="col-md-12 text-center">
            <h2 class="animated7 white">
                <span>The way of <strong>Success</strong></span>
            </h2>
            <h3 class="animated8 white">
               <span>Why you are waiting</span>
           </h3>		
           <div class="">
            <a class="animated4 slider btn btn-primary btn-min-block" href="#">Get Now</a><a class="animated4 slider btn btn-default btn-min-block" href="#">Live Demo</a>
        </div>     
    </div>
</div>
</div><!--/ Carousel item end -->
</div><!-- Carousel inner end-->

<!-- Controls -->
<a class="left carousel-control" href="#main-slide" data-slide="prev">
 <span><i class="fa fa-angle-left"></i></span>
</a>
<a class="right carousel-control" href="#main-slide" data-slide="next">
 <span><i class="fa fa-angle-right"></i></span>
</a>
</div><!-- /carousel -->    	
</section>
<!-- End HomePage Slider -->



<!-- Start Content -->
<div id="content">
   <div class="container">
      
      <!-- Start Services Icons -->
      <div class="row">
        
        <!-- Start Service Icon 1 -->
        <div class="col-md-3 col-sm-6 service-box service-center">
           <div class="service-icon">
             <i class="fa fa-magic icon-medium-effect icon-effect-2"></i>
         </div>
         <div class="service-content">
          <h4>High Quality Theme</h4>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p>
      </div>
  </div>
  <!-- End Service Icon 1 -->
  
  <!-- Start Service Icon 2 -->
  <div class="col-md-3 col-sm-6 service-box service-center">
     <div class="service-icon">
       <i class="fa fa-eye icon-medium-effect icon-effect-2"></i>
   </div>
   <div class="service-content">
    <h4>Retina Display Ready</h4>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p>
</div>
</div>
<!-- End Service Icon 2 -->

<!-- Start Service Icon 3 -->
<div class="col-md-3 col-sm-6 service-box service-center">
   <div class="service-icon">
     <i class="fa fa-code icon-medium-effect icon-effect-2 gray-icon"></i>
 </div>
 <div class="service-content">
  <h4>Clean Modern Code</h4>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p>
</div>
</div>
<!-- End Service Icon 3 -->

<!-- Start Service Icon 4 -->
<div class="col-md-3 col-sm-6 service-box service-center">
   <div class="service-icon">
     <i class="fa fa-bolt icon-medium-effect icon-effect-2 gray-icon"></i>
 </div>
 <div class="service-content">
  <h4>Fast & Light Theme</h4>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p>
</div>
</div>
<!-- End Service Icon 4 -->

</div>
<!-- End Services Icons -->

<!-- Divider -->
<div class="hr1 margin-top"></div>
       
       
       <!-- Start Recent Projects Carousel -->
				<div class="recent-projects">
					<h4 class="title"><span>Recent Projects</span></h4>
					<div class="projects-carousel touch-carousel">
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" data-lightbox-type="ajax" href="https://vimeo.com/78468485">
										<div class="thumb-overlay"><i class="fa fa-play"></i></div>
										<img alt="" src="images/Portfolio/1.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/2.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Logo</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/3.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/4.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
										<span>Ilustration</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-02.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/5.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Logo</span>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/6.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-03.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/7.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/8.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/9.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/10.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/11.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/12.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
					</div>
				</div>
				<!-- End Recent Projects Carousel -->
       
       <!-- Divider -->
<div class="hr1 margin-60"></div>


<div class="row">
   <div class="col-md-8">
      
     <!-- Start Recent Posts Carousel -->
     <div class="latest-posts">
        <h4 class="classic-title"><span>Latest News</span></h4>
        <div class="latest-posts-classic custom-carousel touch-carousel" data-appeared-items="2">
          
          <!-- Posts 1 -->
          <div class="post-row item">
            <div class="left-meta-post">
              <div class="post-date"><span class="day">28</span><span class="month">Dec</span></div>
              <div class="post-type"><i class="fa fa-picture-o"></i></div>
          </div>
          <h3 class="post-title"><a href="#">Standard Post With Image</a></h3>
          <div class="post-content">
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
          </div>
      </div>
      
      <!-- Posts 2 -->
      <div class="post-row item">
        <div class="left-meta-post">
          <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
          <div class="post-type"><i class="fa fa-picture-o"></i></div>
      </div>
      <h3 class="post-title"><a href="#">Link Post</a></h3>
      <div class="post-content">
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
      </div>
  </div>
  
  <!-- Posts 3 -->
  <div class="post-row item">
    <div class="left-meta-post">
      <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
      <div class="post-type"><i class="fa fa-picture-o"></i></div>
  </div>
  <h3 class="post-title"><a href="#">Iframe Video Post</a></h3>
  <div class="post-content">
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
  </div>
</div>

<!-- Posts 4 -->
<div class="post-row item">
    <div class="left-meta-post">
      <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
      <div class="post-type"><i class="fa fa-picture-o"></i></div>
  </div>
  <h3 class="post-title"><a href="#">Gallery Post</a></h3>
  <div class="post-content">
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
  </div>
</div>

<!-- Posts 5 -->
<div class="post-row item">
    <div class="left-meta-post">
      <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
      <div class="post-type"><i class="fa fa-picture-o"></i></div>
  </div>
  <h3 class="post-title"><a href="#">Standard Post without Image</a></h3>
  <div class="post-content">
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
  </div>
</div>

<!-- Posts 6 -->
<div class="post-row item">
    <div class="left-meta-post">
      <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
      <div class="post-type"><i class="fa fa-picture-o"></i></div>
  </div>
  <h3 class="post-title"><a href="#">Iframe Audio Post</a></h3>
  <div class="post-content">
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. <a class="read-more" href="#">Read More...</a></p>
  </div>
</div>

</div>
</div>
<!-- End Recent Posts Carousel -->

</div>

<div class="col-md-4">
  
  <!-- Classic Heading -->
  <h4 class="classic-title"><span>Testimonials</span></h4>
  
  <!-- Start Testimonials Carousel -->
  <div class="custom-carousel show-one-slide touch-carousel" data-appeared-items="1">
    <!-- Testimonial 1 -->
    <div class="classic-testimonials item">
      <div class="testimonial-content">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="testimonial-author"><span>John Doe</span> - Customer</div>
</div>
<!-- Testimonial 2 -->
<div class="classic-testimonials item">
  <div class="testimonial-content">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="testimonial-author"><span>John Doe</span> - Customer</div>
</div>
<!-- Testimonial 3 -->
<div class="classic-testimonials item">
  <div class="testimonial-content">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="testimonial-author"><span>John Doe</span> - Customer</div>
</div>
</div>
<!-- End Testimonials Carousel -->

</div>
</div>

<!-- Divider -->
<div class="hr1 margin-60"></div>



<!-- Start Call Action -->
<div class="call-action call-action-boxed call-action-style1 clearfix">
  <!-- Call Action Button -->
  <div class="button-side" style="margin-top:4px;"><a href="#" class="btn-system btn-large">Purchase It Now</a></div>
  <!-- Call Action Text -->
  <h2 class="primary"><strong>Margo</strong> is the best theme to create an <strong>awesome website!</strong></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<!-- End Call Action -->

</div>
</div>
<!-- End content -->




<!-- Start Footer -->
<footer>
   <div class="container">
      <div class="row footer-widgets">
        
        <!-- Start Subscribe & Social Links Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget mail-subscribe-widget">
                            <h4>Get in touch<span class="head-line"></span></h4>
                            <p>Join our mailing list to stay up to date and get notices about our new releases!</p>
                            <form class="subscribe">
                                <input type="text" placeholder="mail@example.com">
                                <input type="submit" class="main-button" value="Send">
                            </form>
                        </div>
                        <div class="footer-widget social-widget">
                            <h4>Follow Us<span class="head-line"></span></h4>
                            <ul class="social-icons">
                                <li>
                                    <a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li>
                                    <a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a class="google" href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                                <li>
                                    <a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a>
                                </li>
                                <li>
                                    <a class="linkdin" href="#"><i class="fa fa-linkedin"></i></a>
                                </li>
                                <li>
                                    <a class="flickr" href="#"><i class="fa fa-flickr"></i></a>
                                </li>
                                <li>
                                    <a class="tumblr" href="#"><i class="fa fa-tumblr"></i></a>
                                </li>
                                <li>
                                    <a class="instgram" href="#"><i class="fa fa-instagram"></i></a>
                                </li>
                                <li>
                                    <a class="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
                                </li>
                                <li>
                                    <a class="skype" href="#"><i class="fa fa-skype"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Subscribe & Social Links Widget -->
                    
                    
                    <!-- Start Twitter Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget twitter-widget">
                            <h4>Twitter Feed<span class="head-line"></span></h4>
                            <ul>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.An Fusce eleifend aliquet nis application.</p>
                                    <span>26 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Twitter Widget -->


                    <!-- Start Flickr Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget flickr-widget">
                            <h4>Flicker Feed<span class="head-line"></span></h4>
                            <ul class="flickr-list">
                                <li>
                                    <a href="images/flickr-01.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-01.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-02.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-02.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-03.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-03.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-04.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-04.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-05.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-05.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-06.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-06.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-07.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-07.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-08.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-08.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-09.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-09.jpg">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Flickr Widget -->

                    
                    <!-- Start Contact Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget contact-widget">
                            <h4><img src="images/footer-margo.png" class="img-responsive" alt="Footer Logo" /></h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
                            <ul>
                                <li><span>Phone Number:</span> +01 234 567 890</li>
                                <li><span>Email:</span> company@company.com</li>
                                <li><span>Website:</span> www.yourdomain.com</li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Contact Widget -->


</div> <!-- .row -->

<!-- Start Copyright -->
<div class="copyright-section">
   <div class="row">
      <div class="col-md-6">
 <p>&copy; 2014 Margo -  All Rights Reserved <a href="http://graygrids.com">GrayGrids</a> </p>
     </div>
     <div class="col-md-6">
         <ul class="footer-nav">
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>						
</div>
</div>
<!-- End Copyright -->

</div>
</footer>
<!-- End Footer -->

</div>
<!-- End Container -->

<!-- Go To Top Link -->
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>

<div id="loader">
   <div class="spinner">
      <div class="dot1"></div>
      <div class="dot2"></div>
  </div>
</div>



</body>
</html>